<template>
  <div id="login">
    <div class="login-box">
    <el-form
    class="loginForm"
    :label-position="left"
    label-width="4rem"
    :model="user"
    style="max-width: 460px"
  >
    <el-form-item class="form-control" label="用户名">
      <el-input class="number" placeholder="用户名" prefix-icon="User" v-model="user.username" />
    </el-form-item>
    <el-form-item class="password" label="密码">
      <el-input  placeholder="密码" prefix-icon="Lock" show-password="true" v-model="user.password" />
    </el-form-item>
      <el-button class="btn" type="button" @click="login">登录</el-button>
  </el-form>


  </div>
  </div>

</template>

<script>
import {addUser} from '@/api/user'
export default {
  // 组件名称
  name: 'LoginView',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      user: {
        username: '',
        password: ''
      }}
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    async login () {
      await  addUser(this.user.username).then(res => {
        console.log(res);
    } ).catch(err => {
        console.log(err)
      })
  }
}
}
</script>

<style scoped >
* {
	padding: 0;
	margin: 0;
	border: 0;
}

#login{
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right,#2b2c43,#1e3158);
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-box{
  width: 20rem;
  height: 10rem;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}
.el-form{
  width: 90%;
  margin-top: 10px;

}
.password{
  margin-top: 20px;
}
.btn{
  width: 100%;
  height: 40px;
  border-radius: 20px;
  margin-top: 20px;
  cursor: pointer;
}
</style>
